<template>
	<view>
		<view class="foot-top"></view>
		<view class="content">
			<view class="title">余额充值</view>
			<view class="method" @tap="isOpenWindow = !isOpenWindow">
				<view class="title">充值方式</view>
				<view class="defaultCard" v-if="cards.length > 0">
					<view class="icon" :style="{'background-image':'url('+cards[defaultIndex].iconURL+')'}"></view>
					<view class="card">{{cards[defaultIndex].name}}</view>
				</view>
				<view class="defaultCard" v-if="cards.length == 0">
					<view class="icon"></view>
					<view class="card">无银行卡</view>
				</view>
			</view>
			<view class="recharge">
				<view class="title">充值金额</view>
				<view class="money">
					<view class="dollor">￥</view>
					<view class="num">
						<input v-model="money" type="text" class="text" @tap="money = null">
					</view>
				</view>
			</view>
			<view class="note">单日交易限额50000.00元</view>
			<view class="enter" @tap="recharge">
				<view>确认充值</view>
			</view>
		</view>
		<view class="window" v-show="isOpenWindow">
			<view class="back"></view>
			<view class="content" :style="{ top: contentTop, height: contentHeight }">
				<view class="head" :style="{ flex: titleFlex }">
					<view class="close" @tap="isOpenWindow = false"></view>
					<view class="title">更换银行卡</view>	
				</view>
				
				<view v-if="cards.length > 0" class="cards" :style="{ flex: cardsFlex }">
					<view v-for="(item,index) in cards" :key="index" :style="{height: cardHeight }">
						<view class="card" @tap="changeDefaultCard(index)">
							<view class="icon" :style="{'background-image':'url('+item.iconURL+')'}"></view>
							<view class="in">{{item.name}}</view>
							<view v-show="index == defaultIndex" class="choosed"></view>
						</view>
					</view>
				</view>
				
				<view class="addCard" @tap="toAddCard" :style="{ flex: addCardFlex }">
					<view class="title">添加新卡充值</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script module="wxs" lang="wxs" src="../../wxs/index.wxs"></script>
<script>
const http = require('../../utils/http.js')
const util = require('../../utils/util')
export default{
	data() {
	  return {
			isOpenWindow: false,
			
			userId: "",
			
			money: "",
			
			defaultIndex: 0,
			
			cards:[
				// {
				// 	name: "建设银行卡",
				// 	iconURL: "../../static/images/ChinaConstructionBank.png",
				// },
				// {
				// 	name: "农业银行卡",
				// 	iconURL: "../../static/images/AgriculturalBankOfChina.png",
				// },
				// {
				// 	name: "工商银行卡",
				// 	iconURL: "../../static/images/IndustrialAndCommercialBank.png",
				// },
				// {
				// 	name: "农业银行卡",
				// 	iconURL: "../../static/images/AgriculturalBankOfChina.png",
				// },
				// {
				// 	name: "工商银行卡",
				// 	iconURL: "../../static/images/IndustrialAndCommercialBank.png",
				// }
			]
	  }
	},
	computed: {
    contentTop() {
			var top = 40 - this.cards.length * 4;
      return `${top}vh`;
    },
    contentHeight() {
      return `${this.cards.length * 6 + 8}vh`;
    },
		titleFlex(){
			var flex = ( 4 / ( this.cards.length * 6 + 8 ) ) * 10;
			return `${flex} 0 0`;
		},
		cardsFlex(){
			var flex = ( ( this.cards.length * 6 ) / ( this.cards.length * 6 + 8 ) ) * 10 ;
			return `${flex} 0 0`;
		},
		addCardFlex(){
			var flex = ( 4 / ( this.cards.length * 6 + 8 ) ) * 10;
			return `${flex} 0 0`;
		},
		cardHeight(){
			var height = 6;
      return `${height}vh`;
		}
	},
  onLoad: function(options) {
		if (options.userId) {
			this.userId = options.userId;
		}
  },
  onShow: function() {
		this.getCards();
  },
	methods: {
		getCards() {
      uni.showLoading()
		  const params = {
		    url: '/mall4cloud_user/m/userCards/get',
		    method: 'GET',
		    data: {
					userId: this.userId
				},
		    callBack: res => {
					if(res.length>0) {
						for (var i = 0; i < res.length; i++) {
							var name = res.[i].bank;
							switch (name){
								case "建设":
									this.$set(this.cards,i,{
										'name': res.[i].bank + "银行卡(" + res.[i].cardNum.toString().substring(15, 19) + ")",
										'iconURL': "../../static/images/ChinaConstructionBank.png",
									});
									break;
								case "农业":
									this.$set(this.cards,i,{
										'name': res.[i].bank + "银行卡(" + res.[i].cardNum.toString().substring(15, 19) + ")",
										'iconURL': "../../static/images/AgriculturalBankOfChina.png",
									});
									break;
								case "工商":
									this.$set(this.cards,i,{
										'name': res.[i].bank + "银行卡(" + res.[i].cardNum.toString().substring(15, 19) + ")",
										'iconURL': "../../static/images/IndustrialAndCommercialBank.png",
									});
									break;
								case "中国":
									this.$set(this.cards,i,{
										'name': res.[i].bank + "银行卡(" + res.[i].cardNum.toString().substring(15, 19) + ")",
										'iconURL': "../../static/images/BankOfChina.png",
									});
									break;
								case "招商":
									this.$set(this.cards,i,{
										'name': res.[i].bank + "银行卡(" + res.[i].cardNum.toString().substring(15, 19) + ")",
										'iconURL': "../../static/images/ChinaMerchantsBank.png",
									});
									break;
								default:
									break;
							}
							this.defaultIndex = 0;
						}
					} else {
						this.defaultIndex = -1;
					}
					uni.hideLoading()
		    }
		  }
		  http.request(params)
		},
		recharge(){
			if ( this.cards.length != 0 && this.money != '' ) {
				const params = {
					url: '/mall4cloud_user/m/userBalance/recharge',
					method: 'POST',
					data: {
						userId: this.userId,
						amount: this.money
					}
				}
				http.request(params);
				
				setTimeout(this.toBalance, 100);
			} else if ( this.cards.length == 0 ) {
				this.isOpenWindow = true;
			} else if ( this.money == '' ) {
				uni.showToast({
					title: '未填入充值金额',
					duration: 2000,
					icon: 'none'
				})
			}
		},
		changeDefaultCard(index){
			this.defaultIndex = index;
			this.isOpenWindow = false;
		},
		toAddCard() {
		  uni.navigateTo({
		    // url: '/pages/addCard/addCard'
		    url: '/pages/addCard/addCard?userId=' + this.userId
		  })
		},
		toBalance() {
		  uni.navigateTo({
		    // url: '/pages/balance/balance'
		    url: '/pages/balance/balance?userId=' + this.userId
		  })
		}
	}
}
</script>

<style>
@import './recharge.css';
</style>